<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0"
    />
    <link
      rel="stylesheet"
      href="https://unpkg.com/leaflet@1.9.3/dist/leaflet.css"
      integrity="sha256-kLaT2GOSpHechhsozzB+flnD+zUyjE2LlfWPgU04xyI="
      crossorigin=""
    />
    <!-- Make sure you put this AFTER Leaflet's CSS -->
    <script
      src="https://unpkg.com/leaflet@1.9.3/dist/leaflet.js"
      integrity="sha256-WBkoXOwTeyKclOHuWtc+i2uENFpDZ9YPdf5Hf+D7ewM="
      crossorigin=""
    ></script>
    <title>Document</title>
  </head>
  <body>
    <div
      id="map"
      style="height: 500px; width: 900px"
    ></div>
    <script>
      var map = L.map('map').setView([51.505, -0.09], 8);

      // 点击显示坐标
      var popup = L.popup();
      map.on('click', function (e) {
        var lat = `${e.latlng.lat.toFixed(4)}`;
        var lng = `${e.latlng.lng.toFixed(4)}`;
        popup
          .setLatLng(e.latlng)
          .setContent('坐标：' + lat + ',' + lng)
          .openOn(map);
        L.marker(e.latlng).addTo(map);
      });
      // 基础层
      var osm = L.tileLayer(
        'http://webrd01.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=7&x={x}&y={y}&z={z}',
        {
          maxZoom: 18,
          attribution: '© AutoNavi',
        }
      );
      // 将一个图层添加到一个layerGroup分组 --覆盖层
      var lundun = L.marker([51.4506, -0.04994]);
      var jianqiao = L.marker([52.1975, 0.1263]);
      var niujin = L.marker([51.7542, -1.219]);
      var cities = L.layerGroup([lundun, jianqiao, niujin]);
      // 将基础地图图层和覆盖分组图层添加到地图中

      // 设置图层控件，控制图层添加到地图
      var baseMaps = { openstreetMap: osm };
      var overlayMaps = { city: cities };
      var layerControl = L.control.layers(baseMaps, overlayMaps).addTo(map);
    </script>
  </body>
</html>
